<template>
  <div class="page">
    <!-- 头部区域 -->
    <div class="product-list-header" ref="listheader">
      <!-- 头部搜索 -->
      <!-- <header class="category-header wrap">
      <i class="iconfont icon-left"></i>
      <div class="header-search">
        <i class="iconfont icon-search"></i>
        <input type="text" class="search-title" />
      </div>
      <i class="iconfont icon-More"></i>
    </header> -->
      <z-header>
        <template v-slot:search>
          <div class="header-search">
            <i class="iconfont icon-search"></i>
            <input type="text" class="search-title" />
          </div>
        </template>
      </z-header>
      <!-- 排序 -->
      <section class="select-menu">
        <div
          :class="['select-item', { active: orderBy === 'default' }]"
          @click="handDefault"
        >
          默认排序
        </div>
        <div
          :class="['select-item', { active: orderBy === 'price_asc' }]"
          @click="handPriceAsc"
        >
          升序
          <i class="iconfont icon-up1"></i>
        </div>
        <div
          :class="['select-item', { active: orderBy === 'price_desc' }]"
          @click="handPriceDesc"
        >
          降序
          <i class="iconfont icon-down1"></i>
        </div>
        <div class="select-item">
          筛选
          <i class="iconfont iconfont-shaixuan"></i>
        </div>
      </section>
    </div>
    <section class="product-list">
      <div class="product-container">
        <van-pull-refresh  ref="vanlist" v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- <div ref="vanlistcontent"> -->
              <van-card
                v-for="item in productList"
                :key="item.id"
                :num="item.stock"
                :price="item.price"
                :origin-price="item.originalPrice"
                :desc="item.subtitle"
                :title="item.name"
                :thumb="item.imageHost + item.mainImage"
                @click="pushDetail(item)"
              />
            <!-- </div> -->
          </van-list>
        </van-pull-refresh>
      </div>
    </section>
  </div>
</template>

<script>
import zHeader from "@/components/common/z-header.vue";
import { getProductList } from "@/api";
export default {
  data() {
    return {
      productList: [],
      orderBy: "default",
      pageSize: 10,
      pageNum: 1,
      loading: false,
      finished: false,
      isLoading: false,
    };
  },
  components: {
    zHeader,
  },
  methods: {
    pushDetail(item) {
      console.log('跳转详情');
      /*
        1. 手动拼接参数 给地址=>  path: '/detail?id' + item.id
      
        2. 通过 router.push 对象的属性 query: {id: item.id} 形式传递参数

        3. 注意 通过 params 属性传递参数 使用 name 名称匹配路由
      */ 
      this.$router.push({
        // path: '/detail/' + item.id, 
        // query: {id: item.id}
        name: 'Detail',
        params: {id: item.id}
      })
    },
    getProductData(params) {
      getProductList(params, (res) => {
        console.log(res);
        this.loading = false;
        if (res.data.list.length !== this.pageSize) {
          this.finished = true;
        }

        if (this.isLoading) {
          // 下拉刷新赋值新数据
          this.productList = res.data.list;
          this.isLoading = false;
          this.finished = false // 允许上拉加载
        } else {
          // 上拉加载更多 合并数据
          this.productList = this.productList.concat(res.data.list);
        }
      });
    },
    // 默认
    handDefault() {
      if (this.orderBy === "default") {
        return;
      }
      this.orderBy = "default";
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },
    // 升序
    handPriceAsc() {
      this.orderBy = "price_asc";
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },
    // 降序
    handPriceDesc() {
      this.orderBy = "price_desc";
      this.getProductData({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },
    onLoad() {
      this.loading = true;
      console.log("上拉了一下");
      this.getProductData({ pageSize: this.pageSize, pageNum: this.pageNum++ });
    },
    onRefresh() {
      this.isLoading = true;
      this.pageNum = 1;
      this.getProductData({ pageSize: this.pageSize, pageNum: this.pageNum++ });
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      //   window.screen.height 屏幕高度
      // console.dir(this.$refs.listheader.clientHeight); 头部高度
      //   console.log(this.$refs.vanlist.$el);

      // this.$refs.vanlist 组件对象
      // this.$refs.vanlist.$el 标签元素对象
      this.$refs.vanlist.$el.style.height =
        window.screen.height - this.$refs.listheader.clientHeight - 50 + "px";
    
    // 触发下拉刷新 
      this.onRefresh()
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin.scss";

.product-list-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;

  .header-search {
    display: flex;
    width: 76%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding: 10px 0;
    color: #232326;
    background: #f7f7f7;
    @include borderRadius(40px);

    .icon-search {
      padding: 0 10px 0 40px;
      font-size: 34px;
    }

    .search-title {
      font-size: 24px;
      color: #666;
      background: #f7f7f7;
    }
  }

  .category-header {
    @include fj;
    width: 100%;
    height: 100px;
    line-height: 100px;
    padding: 0 30px;
    @include boxSizing;
    font-size: 30px;
    color: #656771;
    z-index: 10000;

    &.active {
      background: $red;
    }

    .icon-left {
      font-size: 50px;
      font-weight: bold;
    }

    .header-search {
      display: flex;
      width: 76%;
      height: 40px;
      line-height: 40px;
      margin: 20px 0;
      padding: 10px 0;
      color: #232326;
      background: #f7f7f7;
      @include borderRadius(40px);

      .icon-search {
        padding: 0 10px 0 40px;
        font-size: 34px;
      }

      .search-title {
        font-size: 24px;
        color: #666;
        background: #f7f7f7;
      }
    }

    .icon-More {
      font-size: 40px;
    }

    .search-btn {
      height: 70px;
      margin: 15px 0;
      line-height: 70px;
      padding: 0 10px;
      color: #fff;
      background: $red;
      @include borderRadius(10px);
    }
  }

  .select-menu {
    margin-top: 90px;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100px;
    background: #fff;

    .select-item {
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      &.active {
        color: $red;
      }
      .iconfont {
        &.icon-down1 {
          color: #999;
          padding-left: 10px;
          font-size: 22px;
        }

        &.icon-up1 {
          @extend .icon-down1;
          font-size: 34px;
        }

        &.iconfont-shaixuan {
          @extend .icon-down1;
          font-size: 28px;
        }
      }
    }
  }
}

.product-list {
  width: 100%;
  .product-container {
    position: absolute;
    left: 0;
    top: 220px;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: auto;
    .van-pull-refresh {
      overflow-y: scroll;
    }
    // .van-list {
      // height: 100%;
      // overflow-y: scroll;
    // }
  }
}
</style>